<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<style>
			/*横线跟数字*/
			/*.top_index{
				color:red;
				font-size: 14px;
				display: inline-block;
				text-align: center;
				font-style: italic;
				width:30px;
				margin-top:40px;
				margin-bottom: 15px;
			}*/
			/*.line{
				width:50px;
				height: 0.5px;
				background:#c4c4c4;
				display: inline-block;
				vertical-align: middle;
			}*/
			/*card样式*/
			/*.card{
				border:1px solid #c4c4c4;
				border-radius: 2px;
				margin:0 15px;
				height:120px;
				padding:15px;
				text-align: left;
				box-shadow: 0 1px 5px #C4C4C4;
			}*/
			/*数字的样式*/
			.index_number{
				color:red;
				font-size: 14px;
				font-style: italic;
				text-align: center;
				display:inline-block;
				margin-top:40px;
				margin-bottom: 15px;
				width: 30px;
			}
			/*线的样式*/
			._line{
				width:50px;
				height:0.5px;
				background:#C4C4C4;
				display:inline-block;
				vertical-align: middle;
			}
			/*卡片*/
			.cards{
				margin:0 15px;
				height: 120px;
				border-radius: 2px;
				box-shadow: 0 1px 5px #E4e4e4;
				border:1px solid #E4e4e4;
				padding: 15px;
				text-align: left;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">北美票房榜</h1>
		</header>
		<div class="mui-content">
			<div id="beimei" class="mui-scroll-wrapper" style="top:40.5px;background: white;touch-action: pan-y;">
			    <div class="mui-scroll">
			        <ul style="list-style: none;padding-left: 1px;margin-top:0">
			        	<li v-for="item in list">
			        		<!--横线跟数字-->
			        		<div style="text-align: center;">
			        			<div class="_line"></div>
			        			<div class="index_number">{{item.solt}}</div>
			        			<div class="_line"></div>
			        		</div>
			        		<div class="cards" @click="open_detail(item)">
			        			<img :src="item.cover" class="mui-pull-left" style="width:70px;height:90px;margin-right: 10px;" />
			        			<div>
			        				<div class="dark-big mui-ellipsis">{{item.title}}</div>
			        				<div>
			        					<span class="gray-medium mui-ellipsis">豆瓣评分:</span>
			        					<span class="orange-medium mui-ellipsis" v-if="item.score>0">{{item.score}}分</span>
			        					<span class="orange-medium mui-ellipsis" v-else>暂无评分</span>
			        				</div>
			        				<div class="gray-medium mui-ellipsis">导演:{{item.casts}}</div>
			        				<div class="gray-medium mui-ellipsis">主演:{{item.directors}}</div>
			        			</div>
			        		</div>
			        		<div class="dark-medium" style="margin-left: 15px;margin-top:10px">票房<span class="orange-medium">{{item.box}}</span>万美元</div>
			        	</li>
			        </ul>
			    </div>
			</div>
			
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var doubang_data = new Vue({
				el:'#beimei',
				data:{
					list:[]
				},
				methods:{
					open_detail:function(item){
						//触发自定义事件
						mui.fire(detailPage,'movieId',{
							id:item.id
						});
						detailPage.show('slide-in-right');
					}
				}
			});
			var detailPage;
			mui.plusReady(function(){
				detailPage = plus.webview.getWebviewById('movies_detail')
				//预加载电影详情页面
				if(!detailPage){
					detailPage = mui.preload({
						id:'movies_detail',
						url:'./html/movies_detail.html'
					});
				}
				getData()
			})
			//滚动事件
			mui('.mui-scroll-wrapper').scroll({
				indicators:false 
			});
			//获取数据
			function getData(){
				plus.nativeUI.showWaiting('加载中...',{
					width:'100px',
					height:'100px'
				})
				mui.getJSON('http://api.douban.com/v2/movie/us_box',{
					
				},function(resp){
					plus.nativeUI.closeWaiting();
					doubang_data.list =convert(resp)
				})
			}
			
			//数据转换
			function convert(_item){
				items = _item.subjects;
				var newItems=[];
				for(var k=0;k<items.length;k++){
					var title = items[k].subject.title;//片面
					var score = items[k].subject.rating.average;//评分
					var casts = '';
					for(var i = 0;i<items[k].subject.casts.length;i++){
						casts+=items[k].subject.casts[i].name;
						if(i!=items[k].subject.casts.length-1){
							casts+='/';
						}
					}
					var directors = '';
					for(var i = 0;i<items[k].subject.directors.length;i++){
						directors+=items[k].subject.directors[i].name;
						if(i!=items[k].subject.directors.length-1){
							directors+='/';
						}
					}
					newItems.push({
						solt:k+1,
						title:title,
						score:score,
						casts:casts,
						directors:directors,
						id:items[k].subject.id,
						cover:items[k].subject.images.large,
						box:items[k].box/10000
					})
				}
				return newItems;
			}
		</script>
	</body>

</html>